<template>
  <view class="order-create-container">
    <!-- 地址选择 -->
    <address-card 
      :address="selectedAddress"
      @click="selectAddress"
    />
    
    <!-- 商品列表 -->
    <view class="product-list">
      <product-card 
        v-for="(item, index) in products" 
        :key="index"
        :product="item"
      />
    </view>
    
    <!-- 订单备注 -->
    <view class="order-note">
      <text>订单备注</text>
      <input 
        v-model="note" 
        placeholder="选填，可填写特殊要求" 
        placeholder-class="placeholder"
      />
    </view>
    
    <!-- 价格明细 -->
    <view class="price-detail">
      <view class="price-row">
        <text>商品金额</text>
        <text>¥{{totalPrice}}</text>
      </view>
      <view class="price-row">
        <text>运费</text>
        <text>{{shippingFee === 0 ? '包邮' : `¥${shippingFee}`}}</text>
      </view>
      <view class="price-row total">
        <text>实付金额</text>
        <text class="price">¥{{actualPayment}}</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <payment-radio 
      v-model="paymentMethod"
      :methods="paymentMethods"
    />
    
    <!-- 提交按钮 -->
    <view class="submit-bar">
      <view class="price-info">
        <text>合计:</text>
        <text class="price">¥{{actualPayment}}</text>
      </view>
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDefaultAddress, createOrder } from '@/api/order'
import AddressCard from './components/AddressCard.vue'
import ProductCard from './components/ProductCard.vue'
import PaymentRadio from './components/PaymentRadio.vue'

// 订单数据
const products = ref([])
const selectedAddress = ref(null)
const note = ref('')
const paymentMethod = ref('wechat')

// 支付方式选项
const paymentMethods = ref([
  { value: 'wechat', label: '微信支付', icon: 'weixin' },
  { value: 'alipay', label: '支付宝', icon: 'alipay' },
  // { value: 'balance', label: '余额支付', icon: 'wallet' }
])

// 计算属性
const totalPrice = computed(() => {
  return products.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})

const shippingFee = computed(() => {
  // 实际项目中根据地址计算运费
  return products.value.some(item => item.freeShipping) ? 0 : 10
})

const actualPayment = computed(() => {
  return totalPrice.value + shippingFee.value
})

// 加载数据
onLoad(async (options) => {
  // 从路由参数获取商品信息
  if (options.productId) {
    products.value = [{
      id: options.productId,
      image: '/static/product.jpg',
      name: '高端智能手机',
      spec: options.spec || '8GB+256GB 黑色',
      price: 3999,
      quantity: 1,
      freeShipping: true
    }]
  } else if (options.cartItems) {
    // 从购物车过来的多个商品
    products.value = JSON.parse(decodeURIComponent(options.cartItems))
  }
  
  // 获取默认地址
  try {
    const res = await getDefaultAddress()
    selectedAddress.value = res.data
  } catch (e) {
    console.log('获取地址失败', e)
  }
})

// 选择地址
const selectAddress = () => {
  uni.navigateTo({
    url: '/pages/address/list?selectMode=1'
  })
}

// 提交订单
const submitOrder = async () => {
  if (!selectedAddress.value) {
    uni.showToast({ title: '请选择收货地址', icon: 'none' })
    return
  }
  
  try {
    const orderData = {
      products: products.value,
      addressId: selectedAddress.value.id,
      paymentMethod: paymentMethod.value,
      note: note.value,
      totalAmount: actualPayment.value
    }
    
    const res = await createOrder(orderData)
    uni.redirectTo({
      url: `/pages/order/payment?id=${res.data.orderId}`
    })
  } catch (e) {
    uni.showToast({ title: '提交订单失败', icon: 'none' })
    console.error(e)
  }
}
</script>

<style lang="scss">
.order-create-container {
  padding-bottom: 120rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  
  .product-list {
    margin: 20rpx 0;
    background-color: $white-bg;;
  }
  
  .order-note {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: $white-bg;;
    margin-bottom: 20rpx;
    
    text {
      width: 160rpx;
      font-size: $font-size-28rpx;
    }
    
    input {
      flex: 1;
      font-size: $font-size-28rpx;
    }
    
    .placeholder {
      color: #ccc;
    }
  }
  
  .price-detail {
    background-color: $white-bg;;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .price-row {
      display: flex;
      justify-content: space-between;
      font-size: $font-size-28rpx;
      color: $text-color-666;
      margin-bottom: 20rpx;
      
      &.total {
        margin-top: 30rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #f5f5f5;
        font-size: $font-size-30rpx;
        color: $text-color;
        
        .price {
          color: $primary-color;
          font-weight: bold;
        }
      }
    }
  }
  
  .submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    display: flex;
    background-color: $white-bg;;
    border-top: 1rpx solid #f5f5f5;
    z-index: 100;
    
    .price-info {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      font-size: $font-size-28rpx;
      
      .price {
        color: $primary-color;
        font-weight: bold;
        font-size: $font-size-32rpx;
        margin-left: 10rpx;
      }
    }
    
    .submit-btn {
      width: 240rpx;
      height: 100%;
      line-height: 100rpx;
      background-color: $primary-color;
      color: $text-color-inverse;
      font-size: $font-size-30rpx;
      border-radius: 0;
      
      &::after {
        border: none;
      }
    }
  }
}
</style>